<template>
    <Layout>
        <!-- 头部 -->
        <div class="SolutionPro">
            <div class="container">
                <div class="row row--30">
                    <div class="col-lg-12">
                        <p class="Banner-ti">数据驱动 智慧生活</p>
                        <h2 class="Banner-Zhong">全流程质量保障</h2>
                        <h2 class="Banner-Bot">提供全新的解决方案</h2>
                    </div>
                    <div class="col-lg-12">
                        <p class="Banner-Cul"><span>精雕细琢十载</span>|<span
                                style="margin: 0px 2px;">API安全稳固</span>|<span>品质之选</span></p>
                    </div>
                    <div class="col-lg-12">
                        <div class="BannerBotBtn">
                            <button class="BannerBotBtn-1" @click="ShowNow">立即咨询</button>
                            <!-- <button class="BannerBotBtn-2" @click="NowRegister">立即注册</button> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 行业挑战 -->
        <div class="IndustryChall">
            <div class="container">
                <el-row>
                    <el-col :span="24" class="IndustryOne">
                        <h6 class="IndusteyH6">行业挑战</h6>
                    </el-col>
                </el-row>

                <el-row class="IndustryZbox">
                    <el-col :span="24" class="IndustryTwo">
                        <el-col :span="14" style="z-index: 10;">
                            <div class="Industwo-one">
                                <span>如何保障金融业务的安全、
                                    稳定运行，保障业务的连续性?</span>
                                <img src="../../assets/images/banner/heng.png" alt="" class="instuImg">
                            </div>
                            <div>
                                <p class="instup">

                                    在金融业务领域，保障业务的安全、稳定运行以及业务的连续性至关重要。这不仅涉及大量资金的流转，而且关系到客户的信任与企业声誉。通过强化风险管理、加强数据安全、遵守合规要求、系统稳定性保障、业务连续性规划、应急预案制定、多渠道服务支持、数据备份恢复以及云服务和分布式技术的应用等措施，我们致力于为您提供一个安全、稳定、可靠的金融环境。我们的热情和专业，将为您带来无忧的金融服务体验。
                                </p>
                            </div>
                        </el-col>
                        <el-col :span="10" class="Industwo-two">
                            <img src="../../assets/images/banner/jiejueri.png" alt="">
                        </el-col>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 解决方案 -->

        <div class="SolutionMac">
            <div class="container">
                <el-row class="SolufirstBox">
                    <el-col :span="24">
                        <h6>解决方案</h6>
                        <p>由一站式测试平台针对金融行业的专家测试服务构成，支撑客户建设契合业务需求的全流程质量保障体系</p>
                    </el-col>
                </el-row>
                <el-row :gutter="100" class="SoluSecdyBox">
                    <el-col :span="14" :xs="24" :sm="24" :md="14" :lg="14">
                        <el-row>
                            <el-col :span="24" class="solua1">
                                金融行业全流程质量保障体系
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 5px;">
                            <el-col :span="2">
                                <el-col class="solua2">
                                    专家 <br>测试服务
                                </el-col>
                            </el-col>
                            <el-col :span="22" :gutter="5" class="solua3">
                                <el-col :span="4" class="solua4">
                                    服务性能测试
                                </el-col>
                                <el-col :span="4" class="solua4">
                                    多业务场景 混合压力测试
                                </el-col>
                                <el-col :span="4" class="solua4">
                                    小程序测试
                                </el-col>
                                <el-col :span="4" class="solua4">
                                    APP兼容性测试
                                </el-col>
                                <el-col :span="4" class="solua4">
                                    APP安全测试
                                </el-col>
                                <el-col :span="4" class="solua4">
                                    幂等补偿等金融 行业专项测试
                                </el-col>
                            </el-col>

                        </el-row>
                        <el-row style="margin-top: 5px;display: flex;">
                            <el-col :span="2">
                                <el-col class="solua5">
                                    测试平台
                                </el-col>
                            </el-col>
                            <el-col :span="2" style="margin-left: 5px;">
                                <el-col class="solua6">
                                    自动化测试
                                </el-col>
                                <el-col class="solua7">
                                    测试管理
                                </el-col>
                                <el-col class="solua7">
                                    基础支撑
                                </el-col>
                            </el-col>
                            <el-col :span="20" style="margin-left: 5px;">
                                <el-row>
                                    <el-col :span="24" class="solua8">后台测试</el-col>
                                </el-row>
                                <el-row style="display: flex;">
                                    <el-col :span="4" class="solua9">接口测试</el-col>
                                    <el-col :span="4" class="solua9">全链路压测</el-col>
                                    <el-col :span="4" class="solua9">接口管理</el-col>
                                    <el-col :span="4" class="solua9">接口Mock</el-col>
                                    <el-col :span="4" class="solua9">接口监控</el-col>
                                    <el-col :span="4" class="solua9">流量录制</el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24" class="solua8">UI测试</el-col>
                                </el-row>
                                <el-row style="display: flex;">
                                    <el-col class="solua12">WebUI自动化测试</el-col>
                                    <el-col class="solua12">安卓自动化测试</el-col>
                                    <el-col class="solua12">安卓兼容性测试</el-col>
                                    <el-col class="solua12">云真机</el-col>
                                    <el-col class="solua12">远程真机操控</el-col>

                                </el-row>
                                <el-row style="display: flex;">
                                    <el-col class="solua10">数据银行</el-col>
                                    <el-col class="solua10">用例管理</el-col>
                                    <el-col class="solua10">测试计划</el-col>
                                    <el-col class="solua10">CI/CD集成</el-col>
                                    <el-col class="solua10">质量看板</el-col>
                                    <el-col class="solua10">公共方法管理</el-col>

                                </el-row>
                                <el-row style="display: flex;">
                                    <el-col class="solua10">真机机房</el-col>
                                    <el-col class="solua10">执行资源管理</el-col>
                                    <el-col class="solua10">执行调度</el-col>
                                    <el-col class="solua10">组织管理</el-col>
                                    <el-col class="solua10">权限中心</el-col>

                                </el-row>
                            </el-col>

                        </el-row>
                    </el-col>
                    <el-col :span="10" :xs="24" :sm="24" :md="10" :lg="10">
                        <el-row>
                            <el-col :span="24" v-for="(itemin, index16) in jiejueff" :key="index16"
                                style="margin-bottom: 25px;">
                                <div class="PlltImagerSol">
                                    <img src="../../assets/images/banner/dui.png" alt="">
                                    <h6>
                                        {{ itemin.name }}
                                    </h6>
                                </div>
                                <p class="PlltImaP">
                                    {{ itemin.title }}
                                </p>
                            </el-col>

                            <el-col :span="24"></el-col>

                        </el-row>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 带图片的解决方案 -->
        <div class="Sipsolutions">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <h6 class="SolutionH6">解决方案</h6>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :xs="24" :sm="24" :md="8" :lg="8" style="margin-bottom: 80px;">
                        <div class="SipsoluIbox">
                            <img src="../../assets/images/banner/schemes1.png" alt="" class="SipIboxOn">
                            <h6 class="SipH6">API全生命周期质量管理</h6>
                            <img src="../../assets/images/banner/scheheng.png" alt="" class="Sipimg">
                            <p class="Sipsolp">覆盖API管理、Mock、流量录制、功能测试、监控、压测及质量度量等各个环节，保障金融业务的安全、稳定运行</p>
                        </div>
                    </el-col>
                    <el-col :span="8" :xs="24" :sm="24" :md="8" :lg="8" style="margin-bottom: 80px;">
                        <div class="SipsoluIbox">
                            <img src="../../assets/images/banner/schemes2.png" alt="" class="SipIboxOn">
                            <h6 class="SipH6">数据安全保障</h6>
                            <img src="../../assets/images/banner/scheheng.png" alt="" class="Sipimg">
                            <p class="Sipsolp">在测试环境及正式环境部署独立执行环境，配合测试数据管理模块，确保各个环境间环境隔离、测试数据隔离与数据安全</p>
                        </div>
                    </el-col>
                    <el-col :span="8" :xs="24" :sm="24" :md="8" :lg="8" style="margin-bottom: 80px;">
                        <div class="SipsoluIbox">
                            <img src="../../assets/images/banner/schemes3.png" alt="" class="SipIboxOn">
                            <h6 class="SipH6">支持多业务场景混合压力测试</h6>
                            <img src="../../assets/images/banner/scheheng.png" alt="" class="Sipimg">
                            <p class="Sipsolp">压测系统支持百万级并发，可模拟多业务、全链路、混合场景的大容量压力测试，定位系统的稳定性与性能问题。</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 注册 -->
        <registerPage></registerPage>

    </Layout>
</template>

<script>
import Layout from '../../components/common/Layout'
import Icon from '../../components/icon/Icon'
import BlogPostMixin from '../../mixins/BlogPostMixin'
import registerPage from '../../components/register/register'
export default {
    name: 'BusinessConsulting',
    components: {
        Icon,
        Layout,
        registerPage
    },
    mixins: [BlogPostMixin],
    data() {
        return {
            jiejueff: [
                {
                    id: 1,
                    name: "API全流程生命周期管理",
                    title: "确保API在不同阶段均保持高质量标准的关键，从设计到退役的每一个环节都需要精心的规划和管理。选择合适的全生命周期管理工具可以大幅提升效率和安全性，而面对挑战和痛点问题时，企业需采取有效的管理策略和解决方案。"
                },
                {
                    id: 2,
                    name: "全链路压测系统",
                    title: "解决业务场景越发复杂化、海量数据冲击下整个业务系统的可用性、扩展性以及容错性的问题，从技术角度降低成本、提高服务可用性，提升团队协作和技术练兵的快速响应。"

                },
                {
                    id: 3,
                    name: "技术支撑",
                    title: "我们拥有强大的技术支撑，提供日常的技术支持服务，解决可是在使用时遇到的问题，定期进行检查和维护，预防潜在的技术问题，具备广泛的技术知识和良好的服务意识，以保障技术与业务之间的高度融合和协同发展。"

                },
            ]
        }
    },
    methods: {
        ShowNow() {
            this.$router.push({
                path: '/seekadfrom'
            })
        },
        NowRegister() {
            this.$router.push({
                path: '/register'
            })
        }
    }
}
</script>
<style lang="scss" scoped>
/* 头部 */
.SolutionPro {

    width: 100%;
    margin: 0 auto;
    color: #fff;
    // height: 700px;
    /* background-color: #ccc; */
    background-image: url('../../assets/images/banner/jiejuedbgc.png');
    background-size: 100% 100%;

    .Banner-ti {
        margin-top: 5%;
        font-family: serif;
        font-size: 48px;
    }

    .Banner-Zhong {
        margin: 5px 0px;
        font-size: 68px;
        font-weight: 700;
    }

    .Banner-Bot {
        font-weight: 400;
        font-size: 68px;
        margin-bottom: 20px;
    }

    .Banner-Cul {
        margin-bottom: 4%;
        font-size: 20px;
    }


    .BannerBotBtn {
        display: flex;
        margin-bottom: 20%;

        .BannerBotBtn-1 {
            width: 160px;
            border: 2px solid #62C3D0;
            /* border: 3px solid transparent; */
            color: #62C3D0;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            margin: 0px 10px 0px 0px;
            height: 59px;
            background-color: transparent;
        }
        // .BannerBotBtn-1:hover {
        //     background-color: #00276c;
        //     border: 2px solid #00276c;
        //     color: #ccc;
        // }

        .BannerBotBtn-2 {
            width: 160px;
            border: 2px solid #e30083;
            color: #fff;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            height: 59px;

            margin: 0px 5px 0px 0px;
            background-color: #e30083;
        }
    }

    @media screen and (max-width: 1200px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 32px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 52px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 52px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 16px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 140px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 50px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 140px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                height: 50px;

                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }
    }


    @media screen and (max-width: 768px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 20px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 36px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 40px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 14px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 100px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 40px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 100px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                height: 40px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }

    @media screen and (max-width: 500px) {
        .Banner-ti {
            margin-top: 8%;
            font-family: serif;
            font-size: 16px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 20px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 12px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 80px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 30px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 80px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                height: 30px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }
}

/* 行业挑战 */
.IndustryChall {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;

    .IndustryOne {
        margin: 80px 0 0 0;
        text-align: center;

        .IndusteyH6 {
            font-weight: 500;
            font-size: 42px;
            color: #3D3D3D;
        }
    }

    .IndustryZbox {
        width: 100%;
        // height: 500px;
        background-image: url('../../assets/images/banner/jiejuefa.png');
        background-size: 100%;
    }

    .IndustryTwo {
        margin-top: 80px;

        .Industwo-one {
            display: flex;
            align-items: flex-end;

            span {
                display: inline-block;
                width: 240px;
                font-size: 16px;
                color: #3D3D3D;
                font-weight: 600;
            }

            .instuImg {
                width: 46px;
                height: 6px;
            }
        }

        .instup {
            margin-top: 20px;
            color: #3D3D3D;
            font-size: 14px;
            width: 720px;
            display: -webkit-box;
            -webkit-line-clamp: 7;
            /* 控制显示的行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .Industwo-two {
            img {
                width: 280px;
            }
        }
    }

}

/* 解决方案 */
.SolutionMac {
    width: 100%;
    margin: 0 auto;
    background-image: url('../../assets/images/banner/jiejuedabgc.png');
    background-size: 100% 100%;
    overflow: hidden;

    .SolufirstBox {
        color: #fff;
        text-align: center;
        margin-top: 6%;

        h6 {
            font-size: 38px;
            margin-bottom: 10px;
        }

        p {
            font-size: 16px;
        }
    }

    .SoluSecdyBox {
        margin: 20px 0;
        color: #fff;
        font-size: 14px;
        overflow: hidden;
        margin: 50px 0 100px 0;

        .solua1 {
            text-align: center;
            background-color: #2966ff;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .solua2 {
            background-color: #2966ff;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 80px;
            padding: 15px 10px;
            text-align: center;
        }

        .solua3 {
            display: flex;
        }

        .solua4 {
            background-color: #10255B;
            height: 80px;
            margin-left: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .solua5 {
            background-color: #2966ff;
            height: 282px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px 10px;
            text-align: center;
        }

        .solua6 {
            background-color: #20518f;
            height: 163px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 5px;
            text-align: center;
        }

        .solua7 {
            background-color: #20518f;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5px;
            padding: 5px;
            font-size: 12px;
        }

        .solua8 {
            background-color: #20518f;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
        }

        .solua9 {
            background-color: #10255B;
            height: 39px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 1px;
            margin-bottom: 5px;

        }

        .solua12 {
            background-color: #10255B;
            height: 39px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 1px;
            margin-bottom: 5px;
        }

        .solua10 {
            background-color: #10255B;
            height: 54px;
            margin: 0 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .PlltImagerSol {
            display: flex;
            align-items: center;

            h6 {
                font-size: 20px;
            }

            img {
                width: 30px;
                margin-right: 10px;
            }
        }

        .PlltImaP {
            padding: 1px 5px 5px 40px;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }
}

// 图片解决方案
.Sipsolutions {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-image: url('../../assets/images/banner/sipsoluts.png');

    .SolutionH6 {
        font-size: 26px;
        color: #3D3D3D;
        text-align: center;
        margin: 75px 0 55px 0;
    }

    .SipsoluIbox {
        overflow: hidden;
        box-shadow: 1px 1px 10px #ccc;

        .SipIboxOn {
            width: 100%;
            height: 170px;
        }

        .SipH6 {
            font-size: 18px;
            padding: 20px 20px 10px 30px;
        }

        .Sipimg {
            margin-left: 30px;
        }

        .Sipsolp {
            padding: 10px 20px 10px 30px;
            font-size: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

        }
    }
}
</style>